<template>
  <div class="month-follow-model">
    <title-bar ref="titlebar" :bar-title='titleText'></title-bar>
    <ECharts ref="lineBar" v-if="init" :options="option" eclass="echart" @ec_click="onClick" :resize="resize"></ECharts>

  </div>
</template>
<script>
  import TitleBar from './title-bar'
  import ECharts from '../components/ECharts'
  import Q from 'q'

  require('echarts/lib/chart/bar')
  require('echarts/lib/component/legend')
  require('echarts/lib/component/tooltip')

  export default {
    props: {
      isValidData: {
        type: Object
      },
      calendar: {
        type: String,
        default:''
      },
      team_id: {
        type: String,
        default:''
      }
    },
    watch: {
      isValidData () {
          this.refactData()
      },
      calendar(){
          this.refactTitle()
      }
    },
    components: {
      TitleBar,
      ECharts
    },
    methods: {

      refactData () {
        this.init = false
        this.su_keys = this.isValidData.su_keys
        this.option.yAxis.data = this.isValidData.su_names
        this.option.series[1].data = this.isValidData.series.a
        this.option.series[0].data = this.isValidData.series.b
        this.option.tooltip.formatter = (params) => {
          var res = params[0].name + '<br/>';
//          console.log(params)
          for (let i in params){
            if(i === '0'){
              res += params[i].marker + params[i].seriesName + ':' + params[i].value + '%' + ' | ' + this.isValidData.num_series.b[parseInt(params[i].dataIndex )] + '<br/>'

            }
            if(i === '1'){
              res += params[i].marker + params[i].seriesName + ':' + params[i].value + '%' + ' | ' + this.isValidData.num_series.a[parseInt(params[i].dataIndex )] + '<br/>'
            }


          }
          return res
        }
        this.option.series[0].label.normal.formatter = (params) => {

          if(params.value === 0){
              return ''
          }else{
              return params.value + '%'
          }
        }

        this.option.series[1].label.normal.formatter = (params) => {

          if(params.value === 0){
            return ''
          }else{
            return params.value + '%'
          }
        }
        setTimeout(() => {
          this.init = true
        })
      },
      onClick(params){

        let suid = this.su_keys[params.dataIndex];
        let type = params.seriesIndex;
        if(type === 0){
            type = 1;
        }else{
            type = 0;
        }
        console.log(type)
        this.$router.push({name:'is-valid-list',query:{'suid':suid,'is_valid':type,'team_id':this.team_id,'calendar':this.calendar}})
      },

      refactTitle(){
          switch (this.calendar){
            case '0':
              this.titleText = '跟进线索比对 (今年)'
              break;
            case '1':
              this.titleText = '跟进线索比对 (去年)'
              break;
            case '2':
              this.titleText = '跟进线索比对 (本季度)'
              break;
            case '3':
              this.titleText = '跟进线索比对 (上季度)'
              break;
            case '5':
              this.titleText = '跟进线索比对 (上月)'
              break;
            case '6':
              this.titleText = '跟进线索比对 (本周)'
              break;
            case '7':
              this.titleText = '跟进线索比对 (上周)'
              break;
            case '8':
              this.titleText = '跟进线索比对 (今天)'
              break;
            case '9':
              this.titleText = '跟进线索比对 (昨天)'
              break;
            default:
              this.titleText = '跟进线索比对 (本月)'

          }
      }
    },

    data () {
      return {
        init: false,
        resize:false,
        su_keys:[],
        titleText:'跟进线索比对 (本月)',
        option: {
          tooltip : {
            trigger: 'axis',
            axisPointer : {
              type : 'shadow'
            }
          },
          legend: {
            data: ['有效线索','无效线索'],
            padding:[
              25,  // 上
              0, // 右
              0,  // 下
              0, // 左
            ]
          },
          xAxis:  {
            type: 'value',
            axisLabel: {
              formatter: '{value}%'
            }
          },
          yAxis: {
            type: 'category',
            data: [],
            axisLabel: {
              formatter: '{value}',
              interval:0,
//              rotate:40,
              margin:0
            },
            offset:5
          },
          series: [
            {
              name: '有效线索',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'inside',
//                  formatter: '{c}%',

                }
              },
              itemStyle:{
                normal:{
                  color:'#aace78'
                }
              },
              data: []
            },
            {
              name: '无效线索',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'inside',
//                  formatter: '{c}%',

                }
              },
              itemStyle:{
                normal:{
                  color:'#70c8f4'
                }
              },
              data: []
            },

          ]
        }
      }
    },
    mounted () {

    }
  }
</script>
<style lang="less">
  .month-follow-model {
    min-height: 200px;
    .echart {
      min-height: 300px;
      width: 106%;
      margin-left: 5px;

    }
  }
</style>
